<template>
  <div class="wrapper">
    <AsideTitle :headeline="headeline" :icon="icon"></AsideTitle>
    <Articlecom @edit="handleEdit" :articelObj="editform"></Articlecom>
    <!-- 弹框 -->
    <el-dialog :title="diatitle" :visible.sync="dialogShow" width="50%">
      <el-form ref="form" :model="editform" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model.trim="editform.title"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <QuillUpload @quillEdit="handleQuill" :uploadName="uploadintro" :editform="editform"></QuillUpload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogShow = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import AsideTitle from "@/components/asideTitle";
import Articlecom from "@/components/articlecom";
import QuillUpload from "@/components/quillUpload";
export default {
  components: {
    AsideTitle,
    Articlecom,
    QuillUpload
  },
  data() {
    return {
      bizType: "scope",
      headeline: "受理范围",
      icon: "fa-bullseye",
      dialogShow: false,
      editform: {
        title: "",
        content: "",
        imgUrl: "",
        bizType: "scope"
      },
      uploadintro: "uploadintro",
      diatitle: "" //diolog标题
    };
  },
  mounted() {
    this.getDataList();
  },
  methods: {
    //获取数据
    async getDataList() {
      let { data: res } = await this._API.queryByBizType({
        bizType: this.bizType
      });
      console.log(res);
      if (res.code == 0) {
        this.formList = res.data;
        if (this.formList.length != 0) {
          this.editform = res.data[0];
        }
      }
    },
    //点击修改按钮触发
    handleEdit() {
      this.dialogShow = true;
      if (this.formList.length == 0) {
        this.diatitle = "新增文章";
      } else {
        this.diatitle = "编辑文章";
        if (this.formList.length != 0) {
          this.editform = this.formList[0];
        }
      }
    },
    //监听quill内容变化
    handleQuill(val) {
      console.log(val);
      this.editform.content = val;
    },
    //点击确定

    async submitForm() {
      if (this.editform.title == "") {
        this.$message.warning("标题不能为空");
        return false;
      }
      if (this.editform.content === "") {
        this.$message.warning("内容不能为空");
        return false;
      }

      if (this.diatitle == "新增文章") {
        //新增文章
        let { data: res } = await this._API.add(this.editform);
        if (res.code == 0) {
          this.$message.success("新增成功");

          this.getDataList();

          this.dialogShow = false;
        }
      } else {
        //编辑文章
        let { data: res } = await this._API.add(this.editform);
        if (res.code == 0) {
          this.$message.success("编辑成功");
          this.getDataList();

          this.dialogShow = false;
        }
      }
    }
  }
};
</script>

<style>
</style>